---
sidebar_position: 10
---

# Modes

### `demo` {#demo}

- Type: `true` | \{ <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `response?:` [`Response`](/docs/connect#Response) | ([`message: MessageContent`](/docs/messages/#MessageContent)) => [`Response`](/docs/connect#Response), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`displayErrors?: DisplayErrors`](#DisplayErrors), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`displayLoading?: DemoLoading`](#DemoLoading), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `displayFileAttachmentContainer?: boolean` <br />
  }\}

This is used by default to demonstrate the component's capabilities without connecting to any APIs. <br />
Set this to _true_ or define an object with properties to remove the initial setup guidance message. <br />
`response` is used to override the default demo response with a custom one. It can either be a [`Response`](/docs/connect#Response) object or a function that returns
a [`Response`](/docs/connect#Response) object. <br />
The following properties are used to toggle elements to showcase their design without making any user actions: <br />
`displayErrors` is used to display error messages. <br />
`displayLoading` is used to display various loading spinners. <br />
`displayFileAttachmentContainer` is used to display the element that encapsulates all of the files to be sent on the next message. <br />

import ComponentContainer from '@site/src/components/table/componentContainer';
import DeepChatBrowser from '@site/src/components/table/deepChatBrowser';
import LineBreak from '@site/src/components/markdown/lineBreak';
import BrowserOnly from '@docusaurus/BrowserOnly';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

<BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>

#### Base Example

<ComponentContainer>
  <DeepChatBrowser style={{borderRadius: '8px'}} demo={true}></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat demo="true"></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat demo="true" style="border-radius: 8px"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Custom Response Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    introMessage={{text: 'Rock, Paper, Scissors! Make your guess and see who wins!'}}
    demo={{
      response: (message) => {
        const options = ['rock', 'paper', 'scissors'];
        const userOption = message.text?.toLocaleLowerCase();
        const aiOption = options[Math.floor(Math.random() * 3)];
        let response = `I guessed ${aiOption}. `;
        if (userOption === aiOption) response += "It's a draw.";
        else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
        else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
        else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
        else response = 'Guess either Rock, Paper or Scissors';
        return {text: response};
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```javascript
chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  id="chat-element"
  introMessage='{"text": "Rock, Paper, Scissors! Make your guess and see who wins!"}'
  style="border-radius: 8px"
></deep-chat>

<script>
// ...other code
const chatElementRef = document.getElementById('chat-element');
chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `focusMode` {#focusMode}

- Type: `true` | \{`smoothScroll?: boolean`, `streamAutoScroll?: boolean`, `fade?:` `true` | `number`\}
- Default: _\{streamAutoScroll: true\}_

This mode displays the latest user request and AI response messages only, providing a modern AI chatbot experience.
You can enable it by using the boolean `true` or an object with any of the following: <br />
`smoothScroll` toggles a scrolling animation when the user posts a new message. <br />
`streamAutoScroll` controls if the chat scrolls down automatically when [streaming](/docs/connect#Stream) a response message. <br />
`fade` toggles a fade effect when the user posts a new message.
It can be enabled with a boolean `true` or a `number` which is the milliseconds duration of the fade. <br />

#### Basic Example

<ComponentContainer>
  <DeepChatBrowser style={{borderRadius: '8px'}} focusMode={true} demo={true}></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat focusMode="true"></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat focusMode="true" demo="true" style="border-radius: 8px"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Scroll Example

<ComponentContainer>
  <DeepChatBrowser style={{borderRadius: '8px'}} focusMode={{scroll: true}} demo={true}></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat focusMode='{"scroll": true}'></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat focusMode='{"scroll": true}' demo="true" style="border-radius: 8px"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

## Types

### `DemoErrors` {#DemoErrors}

- Type: \{`default?: boolean`, `service?: boolean`, `speechToText?: boolean`\}

Display various error messages. This is mainly used to showcase the override capabilities in [`errorMessages`](/docs/messages#errorMessages). <br />
`default` displays a default component error. <br />
`service` is an API error. <br />
`speechToText` is a speech to text issue error.

<ComponentContainer>
  <DeepChatBrowser style={{borderRadius: '8px'}} demo={{displayErrors: {service: true}}}></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat demo='{"displayErrors": {"service": true}}'></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat demo='{"displayErrors": {"service": true}}' style="border-radius: 8px"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `DemoLoading` {#DemoLoading}

- Type: \{ <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `message?: boolean`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `history?:` \{`full?: boolean`, `small?: boolean`} <br />
  \}

Display various loading spinners. <br />
`message` is a loading spinner inside a message bubble. <br />
`history` is a loading spinner that is displayed when messages are being loading via [`loadHistory`](/docs/interceptors#loadHistory).
`full` is a spinner that covers the entire chat message window on the initial load. `small` is displayed when there are messages
already present inside the chat. If `full` is set to _true_ and messages are added, the chat will automatically display the `small`
spinner. <br />

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    demo={{displayLoading: {message: true, history: {small: true}}}}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat demo='{"displayLoading": {"message": true, "history": {"small": true}}}'></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat demo='{"displayLoading": {"message": true, "history": {"small": true}}}' style="border-radius: 8px"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>
